<template>
 <div class="card-table">
    <div class="header">
        <div @click="$router.go(-1)" class="goBackIcon">
            <i class="el-icon-arrow-left" style="margin-right:1px;"></i>返回
        </div>
        <div style="margin-left:16px;">{{edit?'修改机加工工单':'新增机加工工单'}}</div>
    </div>
    <div class="main">
        <el-alert
            style="margin-bottom:12px;"
            title="先选择焙烧工单再添机加工个数"
            type="warning"
            show-icon>
        </el-alert>
        <el-form size="medium" :model="form" :rules="rules" ref="form" label-width="120px" class="demo-form">
          <el-form-item style="margin:24px;" label="焙烧工单" prop="">
            <div
              @click="dialogTableVisible=true"
              :class="!form.crucibleFirstRoast?'text':''"
              style="display:inline-flex;width:350px;box-sizing:border-box;border:thin solid rgb(230, 230, 230);margin-right:24px;border-radius:2px;padding-left:12px;">
              {{!form.crucibleFirstRoast?'工单编号/ 炉号或外加工单位/ 装炉人或负责人':form.crucibleFirstRoast.workOrderStartTime.slice(0,-3) +' / '+ (form.crucibleFirstRoast.isOutHelp?form.crucibleFirstRoast.outHelpCompany:form.crucibleFirstRoast.stoveCode) +' / '+ form.crucibleFirstRoast.inStoveMan}}
            </div>
            <el-button icon="el-icon-edit-outline" type="primary" @click.capture.stop="selectRow=form.crucibleFirstRoast, dialogTableVisible=true">选择工单</el-button>
          </el-form-item>
        <el-form-item style="margin:24px;" label="机加工数量(个)" prop="crucibleNumber">
          <el-input  style="width:350px;" type="number" v-model.number="form.crucibleNumber" placeholder="填入机加工数量"></el-input>
          <el-tag
            style="margin-left:24px;"
            type="">
            最大机加工数：{{!form.crucibleFirstRoast?'0':form.crucibleFirstRoast.prepareMachiningNum }} 个
          </el-tag>
        </el-form-item>
          <el-form-item style="margin:24px;" label="目标客户" prop="targetCustomer">
              <el-input  style="width:350px;" v-model="form.targetCustomer" placeholder="填入目标客户"></el-input>
          </el-form-item>
          <el-form-item style="margin:24px;" label="机加工开始时间" prop="produceStartTime">
              <el-date-picker
                style="width:350px;"
                v-model="form.produceStartTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
          </el-form-item>
          <el-form-item style="margin:24px;" label="负责人" prop="principal">
              <el-input  style="width:350px;" v-model="form.principal" placeholder="填入负责人"></el-input>
          </el-form-item>
        <div style="border-bottom: thin solid rgb(228, 236, 240);"></div>
        </el-form>
        <el-dialog width="65%" :modal-append-to-body="false" title="待机加工工单" :visible.sync="dialogTableVisible">
            <el-alert
                style="margin-bottom:12px;"
                title="点击表格某一行或单选按钮即可选中工单"
                type="warning"
                show-icon>
            </el-alert>
            <el-table @row-click="selectTableRow" ref="multipleTable" height="400" :header-cell-style="getRowClass" :data="tableData" style="width: 100%">
              <el-table-column
                  width="55">
                  <template slot-scope="{row}">
                      <el-button class="selectTableRow_style" :class="selectRow._id==row._id?'selected':''" :icon="'el-icon-check'" circle @click="selectTableRow(row)"></el-button>
                  </template>
              </el-table-column>
              <el-table-column label="待机加工数" align="center" width="120">
                  <template slot-scope="{row}">
                  {{row.code}}
                  </template>
              </el-table-column>
              <el-table-column label="待机加工数" align="center" width="120">
                  <template slot-scope="{row}">
                  <span style="font-weight:bold;">{{row.prepareMachiningNum}}</span>
                  </template>
              </el-table-column>
              <el-table-column label="焙烧工单生成时间" align="center" width="155">
                  <template slot-scope="{row}">
                  <span>{{row.workOrderStartTime?row.workOrderStartTime.slice(0,-3):''}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  label="炉号 / 外加工单位"
                  width="">
                  <template slot-scope="{ row }">
                    {{!row.isOutHelp?row.stoveCode:row.outHelpCompany}}
                  </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="inStoveMan"
                  label="装炉人 / 负责人"
                  width="">
              </el-table-column>
            </el-table>
            <div class="pagin">
                <div style="float:left;">
                  <el-button @click="confirmSelect()" type="primary">确 定</el-button>
                  <el-button plain type="primary" @click="selectRow='',dialogTableVisible=false">取 消</el-button>
                </div>
            </div>
        </el-dialog>

    </div>
    <div class="footer">
        <div class="footer-wrap">
            <el-button icon="el-icon-document-checked" @click="submitForm('form')" type="primary">提 交</el-button>
            <el-button v-if="!edit" icon="el-icon-refresh-right" plain type="primary" @click="resetForm('form')">重 置</el-button>
            <el-button icon="el-icon-document-remove" @click="$router.go(-1)">取 消</el-button>
        </div>
    </div>
 </div>
</template>

<script>

import { crucibleFirstRoastGet, crucibleMachiningCreate, crucibleMachiningUpdate } from '@/api/crucible.js'
import { nomalPages } from '@/mixin'
export default {
  name: 'test',
  mixins: [nomalPages],
  components: {},
  data () {
    return {
      dialogTableVisible: false,
      allSelectNumber: 0,
      selectRow: '',
      selectIndex: '', // 点击选择工单时的行的索引($index)
      inputNumber: [],
      edit: false,
      tableData: [
        {
          crucibleFirstRoast: {

          },
          crucibleNumber: ''
        }
      ],
      form: {
        inputPeople: this.$store.getters.getUserName,
        crucibleFirstRoast: '',
        crucibleNumber: '',
        produceStartTime: '', // 开始生产时间
        principal: '' // 机加工人
      },
      rules: {
        crucibleNumber: [
          { required: true, message: '请输入机加工个数', trigger: 'change' }
        ],
        workOrderStartTime: [
          { required: true, message: '请输入工单开始时间', trigger: 'change' }
        ],
        produceStartTime: [
          { required: true, message: '请输入开始生产时间', trigger: 'change' }
        ],
        principal: [
          { required: true, message: '请输入负责人', trigger: 'change' }
        ],
        targetCustomer: [
          { required: true, message: '请输入目标客户', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
    'form.crucibleNumber' (value) {
      if (!this.form.crucibleFirstRoast) {
        this.$message('请先选择焙烧工单')
        this.form.crucibleNumber = ''
      } else {
        if (value > this.form.crucibleFirstRoast.prepareMachiningNum) {
          this.form.crucibleNumber = this.form.crucibleFirstRoast.prepareMachiningNum
          this.$message('填写数量请勿超过总数')
        }
      }
    }
  },
  created () {},
  mounted () {
    if (this.$route.query.row !== undefined) {
      const payload = JSON.parse(this.$route.query.row)
      payload.crucibleFirstRoast.prepareMachiningNum = payload.crucibleNumber + payload.crucibleFirstRoast.prepareMachiningNum
      this.selectRow = payload.crucibleFirstRoast
      this.edit = true
      this.form = payload
    }
  },
  methods: {
    selectTableRow (row) {
      this.selectRow = { ...row }
    },
    getRowClass2 ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'font-weight:200;background-color:#FAFAFA;color:#999;'
      } else {
        return ''
      }
    },
    confirmSelect () {
      this.form.crucibleFirstRoast = this.selectRow
      this.dialogTableVisible = false
    },
    getAllData () {
      const params = {
        isQualityTesting: true
      }
      crucibleFirstRoastGet(params).then(res => {
        if (res.data.code === 200) {
          var tableData = res.data.data.pageData
          if (this.$route.query.row !== undefined) {
            for (let index = 0; index < tableData.length; index++) {
              const each = tableData[index]
              if (each._id === this.form.crucibleFirstRoast._id) {
                tableData[index].prepareMachiningNum += this.form.crucibleNumber
              }
            }
          }
          this.tableData = tableData
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const payload = JSON.parse(JSON.stringify(this.form))
          payload.crucibleFirstRoastId = payload.crucibleFirstRoast._id
          if (this.edit) {
            crucibleMachiningUpdate(payload).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$router.go(-1)
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'warning'
                })
              }
            })
          } else {
            crucibleMachiningCreate(payload).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.$router.go(-1)
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'warning'
                })
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.selectRow = ''
      this.form.crucibleFirstRoast = ''
    }
  }
}
</script>

<style  scoped>
.card-table{
    padding: 0;
}
.header{
    display: flex;
    align-items: center;
    padding: 18px;
    border-bottom: thin solid rgb(228, 236, 240);
    .goBackIcon{
        cursor: pointer;
        color: $primary;
    }
}
.main{
    padding: 12px 24px;
}
.footer{
  padding: 24px 24px 24px 40px;
}
.pagin{
  display: flex;
  justify-content:space-between;
  padding: 24px 12px 12px 24px;
}
.pagin  .el-pager .active{
  background-color: $primary !important;
}
 .el-dialog__header{
    padding-bottom:16px;
    border-bottom: thin solid rgb(229, 229, 236);
}
.selectTableRow_style.selected{
    background:$primary;
    transform:rotate(0deg) !important;
}
.selectTableRow_style{
    transition: all 0.25s;
    transform:rotate(-90deg);
    padding: 2px;
    border-radius: 6px;
    border-color:$primary;
     .el-icon-check{
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
}
.el-table__row{
    cursor: pointer;
}
.el-collapse {
  border: 0px !important;
}
.el-collapse-item__header{
  justify-content: flex-start;
  border: 0px !important;
  line-height: 2.5;
}
.el-collapse-item__arrow{
  font-size: 16px;
  margin-left:24px;
}
.el-collapse-item__content{
  margin: 24px;
  margin-bottom: 12px;
}
.selectTableRow_style.selected{
    background:$primary;
    transform:rotate(0deg) !important;
}
.selectTableRow_style{
    transition: all 0.25s;
    transform:rotate(-90deg);
    padding: 2px;
    border-radius: 6px;
    border-color:$primary;
     .el-icon-check{
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
}
.text {
  color:#999;
}
</style>
